<template>
  <div class="conserveRecordAdd">
    <div class="select">
      <el-button size="mini" icon="el-icon-edit" type="warning" @click="select('temporary')">{{temporaryData?'已选择临时养护':'选择临时养护'}}</el-button>
      <el-button size="mini" icon="el-icon-edit" type="primary" @click="select('plan')">{{planData?'已选择养护计划':'选择养护计划'}}</el-button>
      <el-button size="mini" icon="el-icon-edit" type="primary" @click="select('task')">{{taskData?'已选择养护任务':'选择养护任务'}}</el-button>
    </div>
    <div v-if="temporaryData">
      <h4>临时养护设备信息&nbsp;&nbsp;<el-button size="mini" icon="el-icon-delete" type="danger" @click="del('temporary')">取消临时养护</el-button></h4>
      <table class="table orange" >
        <tr>
          <td>设备名称</td>
          <td>{{temporaryData.deviceName}}</td>
          <td>设备编号</td>
          <td>{{temporaryData.deviceCode}}</td>
        </tr>
        <tr>
          <td>类别</td>
          <td>{{temporaryData.maintainCategory}}</td>
          <td>品牌</td>
          <td>{{temporaryData.deviceBrandsName}}</td>
        </tr>
        <tr>
          <td>购置日期</td>
          <td>{{temporaryData.buyDate}}</td>
          <td>设备价格</td>
          <td>{{temporaryData.buyMoney}}</td>
        </tr>
      </table>
    </div>
    <div v-if="planData">
      <h4>养护计划信息&nbsp;&nbsp;<el-button size="mini" icon="el-icon-delete" type="danger" @click="del('plan')">取消选择养护计划</el-button></h4>
      <table class="table" border="1" rules="all">
        <tr>
          <td>计划编号</td>
          <td>{{planData.planCoder}}</td>
          <td>计划名称</td>
          <td>{{planData.planName}}</td>
        </tr>
        <tr>
          <td>设备名称</td>
          <td>{{planData.deviceName}}</td>
          <td>设备编号</td>
          <td>{{planData.deviceCoder}}</td>
        </tr>
        <tr>
          <td>责任人</td>
          <td>{{planData.nickName}}</td>
          <td>是否生成任务</td>
          <td>{{planData.isStart==1?'是':'否'}}</td>
        </tr>
      </table>
    </div>
    <div v-if="taskData">
      <h4>任务详情&nbsp;&nbsp;<el-button size="mini" icon="el-icon-delete" type="danger" @click="del('task')">取消本次任务养护</el-button></h4>
      <table class="table" border="1" rules="all">
        <tr>
          <td>设备名称</td>
          <td>{{taskData.deviceName}}</td>
          <td>设备编号</td>
          <td>{{taskData.deviceCoder}}</td>
        </tr>
        <tr>
          <td>任务单号</td>
          <td>{{taskData.taskCoder}}</td>
          <td>养护类型</td>
          <td>{{taskData.dictLabel}}</td>
        </tr>
        <tr>
          <td>养护周期</td>
          <td>{{taskData.circlecycle}}
            <span v-show="taskData.circleUnit==1">天</span>
            <span v-show="taskData.circleUnit==2">周</span>
            <span v-show="taskData.circleUnit==3">月</span>
          </td>
          <td>责任人</td>
          <td>{{taskData.nickName}}</td>
        </tr>
        <tr>
          <td>养护说明</td>
          <td colspan="3">{{taskData.conserveexplain}}</td>
        </tr>
      </table>
    </div>
    <h4>养护记录</h4>
    <table border="1" rules="all" class="table table1">
      <tr>
        <td>养护时间</td>
        <td>
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            v-model="addForm.executeDate">
          </el-date-picker>
        </td>
        <td>养护人</td>
        <td>{{userName}}</td>
        <td>养护总费用</td>
        <td>{{addForm.conserCost}}</td>
      </tr>
      <tr class="height">
        <td>养护描述</td>
        <td colspan="5">
          <el-input type="textarea" :rows="3" v-model="addForm.consedeScribe"></el-input>
        </td>
      </tr>
    </table>
    <h4 class="uploadH4">图片 </h4>
    <el-upload
        :action="baseUrl()+'/common/upload'"
        :on-success="fileSuccess"
        :show-file-list="false"
        >
      <el-button size="mini" type="warning" icon="el-icon-folder-add">上传</el-button>
    </el-upload>
    <div class="unloadBox">
      <div class="img" v-for="(item,index) in addForm.annexList">
        <el-image :src="baseUrl()+item.filePath" :preview-src-list="[baseUrl()+item.filePath]"></el-image>
        <i class="el-icon-close" @click="imgDel(index,item.filePath)"></i>
      </div>
    </div>
    <h4>保养费用
      <el-button type="primary" size="mini" icon="el-icon-plus" @click="cost">添加</el-button>
    </h4>
    <el-table v-loading="taskLoading" :data="addForm.deviceMaintainrcostList" border>
       <el-table-column label="名称" prop="name"/>
      <el-table-column label="使用人" prop="user">
        <template slot-scope="scope">
          {{userName}}
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="number" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="单价" prop="price" width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.price" :min="0"  :controls="false" @change="sum(scope.row)"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="小计">
        <template slot-scope="scope">{{scope.row.subtotal}}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="dele(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="total">总计：{{addForm.conserCost}}</div>
    <div class="btn">
      <el-button size="mini" type="primary" @click="submit">提交</el-button>
    </div>
    <costDialog v-if="costDialog" @selectChange="currentChange"></costDialog>
    <temporary v-if="temporaryDialog" @temporaryChange="temporaryChange" ></temporary>
    <plan v-if="planDialog" @planChange="planChange"></plan>
    <task v-if="taskDialog" :info="planData" @taskChange="taskChange"></task>
  </div>
</template>

<script>
  import {conserveRecordAdd,conservetaskEdit} from '@/api/curing/index'
  import costDialog from "@/views/conserve/conserveTask/costDialog";
  import  {fileDelete,fileDownload,fileDeleteLibrary} from '@/api/basicInformation/index'
  import temporary from "./temporary";
  import Cookies from "js-cookie";
  import plan from "./plan";
  import task from "./task";
  export default {
    name: "conserveRecordAdd.vue",
    components:{costDialog,plan,task,temporary},
    data() {
      return {
        userName:Cookies.get("username"),
        temporaryData:'',
        planData:'',
        taskData:'',
        temporaryDialog:false,
        planDialog:false,
        taskDialog:false,


        addForm: {
          annexList:[],
          deviceMaintainrcostList:[],
          conserCost:0
        },//查询条件

        fileList:[],
        costDialog:false,
        selectData:[],
        taskLoading:false
      }
    },

    methods: {
      getTaskList() {

      },
      fileSuccess(res) {
        //文件上传成功
        this.addForm.annexList.push({ fileName: res.fileName, filePath: res.filePath,fileType:1})
      },
      async imgDel(index,filePath){
        for(let i=0;i<this.addForm.annexList.length;i++){
          if(index==i){
            if(this.addForm.annexList[i].id){
              await fileDeleteLibrary(this.addForm.annexList[i].id)
            }else{
              await fileDelete(this.addForm.annexList.filePath);
            }
            this.addForm.annexList.splice(i, 1);
          }
        }
      },
      sum() {
        this.addForm.conserCost=0
        this.addForm.deviceMaintainrcostList.forEach((item,index)=>{
          this.$set(item,'subtotal',item.number*item.price)
          this.$set(this.addForm.deviceMaintainrcostList,index,item)

          this.addForm.conserCost+=item.subtotal

        })
      },
      dele(index, row) {
        this.addForm.deviceMaintainrcostList.splice(index, 1)
        this.$message.success('删除成功')
        this.sum()
      },
      select(type){
        if(this.temporaryData || this.planData || this.taskData){
          if(type=='task'&&!this.temporaryData){

          }else{
            this.$message.warning("不能同时选择计划养护和其他养护,请先取消其他养护")
            return
          }

        }
        if(type=='temporary'){
          this.temporaryDialog=true;
        }else if(type=='plan'){
          this.planDialog=true;
        }else if(type=='task'){
          this.taskDialog=true;
        }
      },
      del(type){
        if(type=='temporary'){
          this.temporaryData='';
        }else if(type=='plan'){
          this.planData='';
        }else if(type=='task'){
          this.taskData='';
        }
      },
      temporaryChange(data){
        if(data){
          this.temporaryData=data
        }
        this.temporaryDialog=false
      },
      planChange(data){
        if(data){
          this.planData=data
        }
        this.planDialog=false
      },
      taskChange(data){
        if(data){
          this.taskData=data
        }
        this.taskDialog=false
      },
      submit(){
        if(this.temporaryData){
          //临时养护
          this.addForm.deviceId=this.temporaryData.id
          this.addForm.deviceName=this.temporaryData.deviceName
          // this.addForm.type=2
          conserveRecordAdd(this.addForm).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.$router.push({path:'/conserve/conserveRecord'});
            }
          })

        }else if(this.planData&&!this.taskData){
          //养护计划
          this.addForm.conservePlanId=this.planData.id
          this.addForm.planName=this.planData.planName
          this.addForm.isStart=this.planData.isStart
          // this.addForm.type=2
          conserveRecordAdd(this.addForm).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.$router.push({path:'/conserve/conserveRecord'});
            }
          })

        }else if(this.taskData){
           //养护任务
          // return false
          this.addForm.taskId=this.taskData.id
          // let obj=Object.assign(this.addForm,this.taskData)
          conserveRecordAdd(this.addForm).then((res)=>{
            if(res.code==200){
              this.$message.success(res.msg)
              this.$router.push({path:'/conserve/conserveRecord'});
            }
          })

        }
        // this.$message.success('新增成功！')
        // this.$router.push({path:'/conserve/conserveRecord'});
      },


      //费用
      cost(){
        this.costDialog=true
      },
      //成功回调
      currentChange(data){
        if(data){
          this.taskLoading=true
          this.addForm.deviceMaintainrcostList=[]
          data.forEach((i,index)=>{
            this.addForm.deviceMaintainrcostList[index]={
              name:i.dictLabel,
              number:0,
              price:0,
              subtotal:0,
              user:null,
              // conservetaskid:null,
              // id:null
            }
          })
          this.taskLoading=false
        }
        this.costDialog=false
      }
    }
  }
</script>

<style lang="scss">
  .conserveRecordAdd {
    margin-left: 10px;
    width: 905px;
    .select{
      margin-top:20px;
    }
    .btn {
      text-align: center;
    }

    h4 {
      color: #05A380;
    }
    .uploadDemo{
      margin:10px;
    }
    .img {
      border: 1px solid #cccccc;
      width: 900px;
      min-height: 50px;
    }
    .orange{
      border:none !important;
      tr{
        td:nth-child(2n) {
          color:orange;
        }
      }
    }
    .table {
      border: 1px solid #cccccc;
      color: #606266;
      font-size: inherit;

      tr {
        td:nth-child(2n-1) {
          width: 150px;
          text-align: center;
        }

        td:nth-child(2n) {
          width: 300px;
          padding-left: 10px;
        }
        td {
          line-height: 35px;
          .red {
            color: red;
          }
          .el-input--medium .el-input__inner,.el-textarea .el-textarea__inner{
            border: none;
          }
        }
        .right {
          text-align: right !important;
          padding-right: 10px;
        }
      }
    }

    .table1 {
      tr {
        td:nth-child(2n-1) {
          width: 100px;
          text-align: center;
        }
        td:nth-child(2n) {
          width: 200px;
          padding-left: 10px;
        }
      }
    }
    .total{
      text-align: right;
      margin-right:10px;
      margin-top:10px;
    }
    .unloadBox{
      border: 1px solid #cccccc;
      margin-top:20px;
      min-height: 50px;
      overflow: hidden;
      .file{
        width:100%;
        border-top:1px #cccccc dotted;
        line-height: 50px;
        .index{
          padding:0 10px;
          color:#666
        };
        i{
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }
        .type{
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
      .img{
        margin:10px 0 10px 10px;
        text-align: center;
        float: left;
        position: relative;
        width:110px;
        height:100px;
        .el-image{
          width:100px;
          height:100px;
          border: 1px solid #cccccc;
          position: absolute;
          top:0;
          left:0;
        }
        i{
          position: absolute;
          right: 0px;
          font-size: 20px;
          top: -4px;
          z-index: 1;
        }
      }



    }
  }

</style>
